<!-- 供应商对账看板 -->

<script setup>

import PurchaseDataChart from "./PurchaseDataChart.vue";
import PurchaseTrendChart from "./PurchaseTrendChart.vue";
import PurchaseInAmountChart from "./PurchaseInAmountChart.vue";
import SupplierRate from "./SupplierRate.vue";
import PurchaseFinishRateChart from "./PurchaseFinishRateChart.vue";

</script>

<template>
  <div class="head">
    <h1>采购管理可视化看板</h1>
  </div>

  <div class="board-row">
    <PurchaseDataChart></PurchaseDataChart>
  </div>

  <div class="board-row">
    <PurchaseTrendChart></PurchaseTrendChart>
  </div>

  <div class="board-row">
    <PurchaseInAmountChart style="flex: 4"></PurchaseInAmountChart>
    <PurchaseFinishRateChart></PurchaseFinishRateChart>
  </div>

</template>

<style scoped>
.board-row {
  display: flex;
  gap: 1em;
  padding: 1em;
}

.board-row>div {
  flex: 1;
}

.selectOption{
  .el-input__wrapper{
    background-color: 	rgba(15,112,169,0.5) !important;
    border-radius: 50px;
    box-shadow: 0 0 0 0;
    padding: 0;
    border: 1px solid #0F70A9;
    width: 118px;
  }
  .el-input__inner {
    padding-left: 15px;
    line-height: 32px;
    font-size: 16px;
    color: #02D9FD;
  }
  .el-input__suffix{
    padding-right: 15px;
  }
  .el-select .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 0 !important;
  }
  .el-select .el-input.is-focus .el-input__wrapper{
    box-shadow: 0 0 0 0 !important;
  }
}
</style>